<!DOCTYPE html>
<html class="ui-page-login" ng-app="cms">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/angular.js"></script>
		<script type="text/javascript" src="js/angular/controller.js"></script>
		<script src="js/app.js"></script>
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body ng-controller="userInfo">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户信息</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group" id="infoForm">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a id="head" class="mui-navigate-right">头像
							<span class="mui-pull-right head" id="imgdiv">
							<img class="head-img mui-action-preview" id="head-img1" src="{{user.picurl}}?imageView2/1/w/100/h/100" height="100" width="100"/>
							<input type="hidden" name="picurl" id="thumpicvalue" value="{{user.picurl}}"/>
						</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a>姓名
							<input type="text" name="username" class="mui-input-clear" value="{{user.username}}">
						</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a>手机
							<input type="text" name="account" class="mui-input-clear" readonly="readonly" value="{{user.account}}">
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a>邮箱
							<input type="text" name="email" name="account" class="mui-input-clear" value="{{user.email}}">
						</a>
					</li>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary" onclick="add()">修改</button>
					</div>
				</ul>
			</form>
		</div>
	</body>

</html>
<script>
	document.getElementById("imgdiv").addEventListener("tap", function() {
		var lfs = [];
		plus.gallery.pick(function(path) {
			lfs = path.files;
			var task = plus.uploader.createUpload("http://hs.tunnel.javano.cn/upload/thum", {
				method: "post"
			}, function(t, status) {
				if(status == 200) {
					console.log(t.responseText);
					var picurl = "http://obq1lvsd9.bkt.clouddn.com/" + t.responseText;
					document.getElementById("thumpicvalue").value = picurl;
					$("#head-img1").attr("src", picurl);
					alert("图片上传成功");
					mask.close(); //关闭遮罩
				} else {
					alert("图片上传失败");
				}
			});
			task.addData("type", "thum");
			task.addFile(lfs[0], {
				key: "thum"
			});
			task.start();
			var mask = mui.createMask(function() {}); //callback为用户点击蒙版时自动执行的回调；
			mask.show(); //显示遮罩
		}, function(e) {
			console.log("取消图片！");
		}, {
			filter: "none",
			multiple: true,
			maximum: 1,
			system: false,
			onmaxed: function() {
				plus.nativeUI.alert('最多选择一张缩略图，大小建议100*100')
			},
			popover: true,
			selected: lfs
		});
	})

	function add() {
		var data = $("#infoForm").serialize();
		console.info(data);
		var state = app.getState();
		if(state.account != null) {
			mui.post('http://hs.tunnel.javano.cn/updUser/' + state.account, data, function(result) {
				alert(result);
				mui.openWindow({
					"id": new Date(),
					"url": "tab4.html",
					"crateNew": true,
					"styles": {
						top: '0px', //mui标题栏默认高度为45px
						bottom: '50px' //默认为0px，可不定义
					}
				});
			}, 'text')
		}
	}
</script>